import React, {useState, useEffect} from 'react'

import {Container} from './style'

import { Form, Input, Button, DatePicker, Switch, Select  } from 'antd'

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'

const { RangePicker } = DatePicker
const { Option } = Select

function PlanMake(){
    const layout = {
        labelCol: { span: 7 },
        wrapperCol: { span: 10 },
    }
    const tailLayout = {
        wrapperCol: { offset: 7, span: 10 },
    }
    const [form] = Form.useForm()

    const [isPublic, setIsPublic] = useState(false)
    const handleIsPublic = (checked) => {
        setIsPublic(checked)
    }

    const [publicRight, setPublicRight] = useState([])
    const handlePublicRight = (value) => {
        setPublicRight(value)
    }
    const onFinish = (values ) => {
        console.log(values )
    }

    useEffect(() => {
        form.setFieldsValue({
            contents: ['']
        })
    }, [])
    return (
        <Container>
            <Form
                {...layout}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                form={form}
            >
                <Form.Item
                    label="标题"
                    name="name"
                    rules={[{ required: true, message: '给计划起个名字', whitespace: true }]}
                >
                    <Input placeholder='给计划起个名字' maxLength="30"/>
                </Form.Item>

                <Form.Item
                    label="起止时间"
                    name="date"
                    rules={[{ required: true, message: '选择计划起止时间!' }]}
                >
                    <RangePicker />
                </Form.Item>

                <Form.List name="contents">
                    {(fields, { add, remove }) => {
                        return (
                            <div>
                                {fields.map((field, index) => (
                                    <Form.Item
                                    {...(index === 0 ? layout : tailLayout)}
                                    label={index === 0 ? '计划内容' : ''}
                                    required={true}
                                    key={field.key}
                                    >
                                    <Form.Item
                                        {...field}
                                        validateTrigger={['onChange', 'onBlur']}
                                        rules={[
                                        {
                                            required: true,
                                            whitespace: true,
                                            message: "请填写计划条目",
                                        },
                                        ]}
                                        noStyle
                                    >
                                        <Input placeholder="计划条目" style={{ width: '80%' }} maxLength="100"/>
                                    </Form.Item>
                                    {fields.length > 1 ? (
                                        <MinusCircleOutlined
                                        className="dynamic-delete-button"
                                        style={{ margin: '0 8px' }}
                                        onClick={() => {
                                            remove(field.name);
                                        }}
                                        />
                                    ) : null}
                                    </Form.Item>
                                ))}
                                <Form.Item {...tailLayout}>
                                    <Button
                                    type="dashed"
                                    onClick={() => {
                                        add()
                                    }}
                                    >
                                    <PlusOutlined /> 添加计划条目
                                    </Button>
                                </Form.Item>
                            </div>
                        );
                    }}
                </Form.List>

                <Form.Item
                    label="是否公开"
                >
                    <Switch checkedChildren="是" unCheckedChildren="否" onChange={handleIsPublic}/>
                </Form.Item>

                <Form.Item {...tailLayout}>
                    {
                        isPublic ? 
                            <Select
                                mode="multiple"
                                style={{ width: '100%' }}
                                placeholder="选择公开权限"
                                onChange={handlePublicRight}
                            >
                                <Option key="1">允许点赞</Option>
                                <Option key="0">允许评论</Option>
                            </Select>
                        :
                            <span>不公开默认无点赞评论功能</span>
                    }
                </Form.Item>


                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit" style={{marginRight: 10}}>
                        确认制定
                    </Button>
                    <Button>
                        暂存
                    </Button>
                </Form.Item>
            </Form>
        </Container>
    )
}

export default PlanMake